﻿@using Zeus.Biz.MySql.EF.Model;

@{
    ViewBag.Title = "WebgridDemo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#FCFCFC;}
    .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
    .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
    .alt { background-color: #E4E9F5; color: #000; }
    .gridHead a:hover {text-decoration:underline;}
    .description { width:auto}
    .select{background-color: #389DF5}
</style>

<h2>WebgridDemo</h2>

@{
    Product product = new Product();
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.NextPrevious);
}
  
<div id="gridContent">
    @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                columns: grid.Columns(
                grid.Column("Id", format: (item) => item.GetSelectLink(item.Id)),
                grid.Column("Name", " Name"),
                grid.Column("Description", "Description", style: "description"),
                grid.Column("Quantity", "Quantity")
         )) 

    @if (grid.HasSelection)
    {
        product = (Product)grid.Rows[grid.SelectedIndex].Value;
        <b>Id</b> @product.Id<br />
        <b>Name</b>  @product.Name<br />
        <b>Description</b> @product.Description<br />
        <b>Quantity</b> @product.Quantity<br />
    }
</div> 
